<template>
	<view class="">
		<!-- 设置列表 -->
		<!-- <block v-for="(item,index) in homelist" :key="index"> -->
		<u-cell-group>
<!-- 			<u-cell-item  @tap="select(item.title)" v-if="item.title!='昵称'" :value="item.value" :title-style="{color:'#A2A2A2'}" :title="item.title" arrow-direction="down" :arrow=false>
				<u-icon slot="right-icon" size="32" :name="item.icon"></u-icon>				
				<input v-if="item.title=='昵称'" type="text" value="" :placeholder="item.value"/>
				<image v-if="item.img" @tap="changeimg()" class="imgclass" :src="user.img" mode="aspectFill" lazy-load></image>
			</u-cell-item> -->
		<!-- 	头像 -->
			<u-cell-item  :title-style="{color:'#A2A2A2'}" title="头像" arrow-direction="down" :arrow=false>
				<u-icon slot="right-icon" size="32" name="edit-pen-fill"></u-icon>				
				<image  @tap="changeimg()" class="imgclass" :src="user.img" mode="aspectFill" lazy-load></image>
			</u-cell-item>
			<!-- 昵称 -->
			<u-cell-item   :title-style="{color:'#A2A2A2'}" title="昵称" arrow-direction="down" :arrow=false>
					<input type="text" v-model="user.username" :placeholder="user.username"/>
			</u-cell-item>
			<!-- 性别 -->
			<u-cell-item :value="user.sex"  @tap="select('性别')" :title-style="{color:'#A2A2A2'}" title="性别" arrow-direction="down" :arrow=false> </u-cell-item>				<!-- 生日 -->
			<picker mode="date" :value="user.time" :start="startDate" :end="endDate" @change="bindDateChange">
                
			<u-cell-item :value="user.time"  @tap="getDate()" :title-style="{color:'#A2A2A2'}" title="生日" arrow-direction="down" :arrow=false> </u-cell-item> </picker>	
			<!-- 	情感 -->
			<u-cell-item :value="user.dog"  @tap="select('情感')" :title-style="{color:'#A2A2A2'}" title="情感" arrow-direction="down" :arrow=false> </u-cell-item>
		<!-- 	职业 -->
		<u-cell-item :value="user.job"  @tap="select('职业')" :title-style="{color:'#A2A2A2'}" title="职业" arrow-direction="down" :arrow=false> </u-cell-item>	
			<pickers @address="address" @close="close" :defaultAddress="home">

		<!-- 	家乡 -->
		<u-cell-item :value="user.home"  @tap="select('家乡')" :title-style="{color:'#A2A2A2'}" title="家乡" arrow-direction="down" :arrow=false> </u-cell-item>		</pickers>
		</u-cell-group>
		
		<button type="default" class="button">保存设置</button>
	</view>
</template>

<script>
		import homeList from '../../components/home/home-list.vue'
		import pickers from '../../components/ming-picker/ming-picker.vue'
	export default{
		data() {
			 const currentDate = this.getDate({
			            format: true
			        })
			return {
				home:[],
				sex: ['不选', '男', '女'],
				dog: ['不选', '单身', '有对象'],
				job: ['无业', 'IT', '民工'],
				user:{
					username:'蔡徐坤',
					img:'https://cdn.uviewui.com/uview/swiper/1.jpg',
					sex:'女',
					dog:'单身',
					job:'IT',
					home:'广东省, 广州市, 番禺区',
					time:''
				
					
				},
				
			}
		},
		components:{
			homeList,
			pickers
		},
	 computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods:{
		  address(e){
				console.log("点击了确认")
				this.user.home=e.value.join("-");
			  },
		  close(){
			console.log("点击了取消")
		  },
			//时间
			getDate(type) {
			            const date = new Date();
			            let year = date.getFullYear();
			            let month = date.getMonth() + 1;
			            let day = date.getDate();
			
			            if (type === 'start') {
			                year = year - 60;
			            } else if (type === 'end') {
			                year = year + 2;
			            }
			            month = month > 9 ? month : '0' + month;;
			            day = day > 9 ? day : '0' + day;
			            return `${year}-${month}-${day}`;
			        }
			    ,
			//修改日期
		 bindDateChange(e) {
			this.user.time = e.target.value
		},	
			//修改头像
		changeimg(){
			uni.chooseImage({
			    count:1, //默认9
			    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			    sourceType: ['album','camera'], //从相册选择
			    success:  (res)=> {
					this.user.img=res.tempFilePaths[0]
			        console.log(JSON.stringify(res.tempFilePaths[0]));
			    }
			});
		},
		//修改其他的
		select(title){
			
			//修改
			let arr=[]
			switch (title){
				case '性别':
				arr=this.sex
				uni.showActionSheet({
					itemList:arr,
				    success:  (res)=> {
				        console.log(JSON.stringify(res));
						this.user.sex=arr[res.tapIndex]
				    },
				    fail: function (res) {
				        console.log(res.errMsg);
				    }
				});
					break;
				case '情感':
				arr=this.dog
				uni.showActionSheet({
					itemList:arr,
				    success:  (res)=> {
				        console.log(JSON.stringify(res));
						this.user.dog=arr[res.tapIndex]
				    },
				    fail: function (res) {
				        console.log(res.errMsg);
				    }
				});
					break;
				case '职业':
				arr=this.job
				uni.showActionSheet({
					itemList:arr,
				    success:  (res)=> {
				        console.log(JSON.stringify(res));
						this.user.job=arr[res.tapIndex]
				    },
				    fail: function (res) {
				        console.log(res.errMsg);
				    }
				});
					break;		
				default:
					break;
			}
			
		}
		}
		
	}
</script>

<style>
	.button{
		background-color: #FFE933;
		margin: 40upx 40upx;
	}
	.user-info-chagename{
		width: 400upx;
		height: 200upx;
	}
</style>
